<template>
  <div>
    <!-- <h2 v-show="flag">
      我是标题
    </h2> -->
    <!-- 重绘    回流 -->
    <!-- <h2 v-if="flag">
      我是标题
    </h2> -->
      <!-- <li v-for="(item, index) in arr" :key="index">
        {{  item.status }}
      </li> -->

      <!-- <li v-for="(item, index) in str" :key="index">
        {{  item }}
      </li> -->

      <!-- <li v-for="(item, index) in num" :key="index">
        {{  item }}
      </li> -->

      <!-- <li v-for="(value, key, index) in obj" :key="index">
        {{  value }} -- {{ key }}  -- {{  index }}
      </li> -->

      <!-- v-bind  :  动态绑定属性 -->
      <!-- <img :src="src" alt=""> -->

      <!-- v-model  表单 -->
      <!-- <input v-model="value" type="text"> -->
      <!-- M V VM -->
      <!-- {{  value }} -->
      <!-- <textarea name="" id="" cols="30" rows="10"></textarea>
      <input type="checkbox">
      <input type="radio">
      <select name="" id="">
        <option value=""></option>
      </select> -->
      <!-- v-html    v-text -->


      <!-- 不常用指令 -->
      <!-- <h3 v-once>
        {{ message }}
      </h3> -->

      <!-- v-cloak -->

      <!-- <div v-cloak>
        {{ message }}
      </div> -->

      <!-- v-pre -->

      <div v-pre>
        {{ abc }}
      </div>
      
    <!-- <div>
      <button @click="changeFlag">点我</button>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "instruct-com",
  data() {
    return {
      message: "我是标题",
      value: "123",
      src: "https://img1.baidu.com/it/u=407852637,3650486136&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675184400&t=a61e2a599863dd41ce8a2ad0359e5897",
      flag: true,
      str: 'abcdefg',
      num: 10,
      obj: {
        name: '张三',
        age: 18
      },
      arr:[
        {
          status: 3
        },
        {
          status: 2
        },
        {
          status: 1
        }
      ]
    }
  },
  methods: {
    changeFlag() {
      // this.flag = !this.flag
      this.message = "我改变了"
    }
  }
}
</script>

<style>
[v-cloak] {
  display: none;
}
</style>